<template>
  <div>
    <!-- 左侧悬浮框 -->
    <div class="suoyin">
      <!-- 指导价 -->
      <div class="gprice">
        <i class="el-icon-shopping-bag-1"></i>
        <span style="font-weight: 600">指导价&nbsp;{{ gprice }}万</span>
      </div>

      <!-- 车型选择 -->
      <div class="block">
        <el-cascader
          v-model="value"
          :options="options"
          placeholder="选择车型"
          :props="{ expandTrigger: 'hover' }"
          @change="handleChange"
        ></el-cascader>
      </div>
      <!-- 购车指南 -->
      <a
        href="javascript:void(0)"
        :class="{ active: active === 0 }"
        @click="goAnchor('cxld')"
      >
        <i class="i1" id="i1"></i>
        <span>车型亮点</span>
      </a>
      <!-- 车型亮点 -->
      <a
        href="javascript:void(0)"
        :class="{ active: active === 1 }"
        @click="goAnchor('clns')"
      >
        <i class="i2" id="i2"></i>
        <span>车辆内饰</span>
      </a>
      <!-- 参数配置 -->
      <a
        href="javascript:void(0)"
        :class="{ active: active === 2 }"
        @click="goAnchor('cspz')"
      >
        <i class="i3" id="i3"></i>
        <span>参数配置</span>
      </a>
      <!-- 服务支持 -->
      <a
        href="javascript:void(0)"
        :class="{ active: active === 3 }"
        @click="goAnchor('fwzc')"
      >
        <i class="i4" id="i4"></i>
        <span>服务流程</span>
      </a>
      <!-- 3D看车 /回到顶部 -->

      <el-backtop :bottom="200" :right="100" :visibility-height="1100">
        <div class="gotop">
          <img src="../assets/3D看车hover.png" alt="" />
          <span>3D看车</span>
        </div>
      </el-backtop>
    </div>
    <div class="content">
      <img
        src="../../public/pic/details/详情海报图.png"
        alt=""
        style="width: 100%"
      />
      <!-- 车辆亮点 锚点-->
      <div id="cxld" style="padding: 10px">
        <img
          src="../../public/pic/details/车辆特色.jpg"
          alt=""
          style="width: 100%"
        />
        <img
          src="../../public/pic/details/车辆详情.jpg"
          alt=""
          style="width: 100%"
        />
      </div>
      <div style="height: 50px"></div>
      <!-- 车辆内饰 锚点-->
      <div id="clns">
        <el-row :gutter="20">
          <el-col :span="8" v-for="i in 15" :key="i">
            <div class="bigger">
              <img
                :src="require(`../../public/pic/details/车辆内饰${i}.webp`)"
                alt=""
              />
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 参数配置 锚点-->
      <div id="cspz">
        <img src="../../public/pic/details/车辆大小.jpg" alt="" />
        <router-link to="/param">
          <el-button type="primary">了解具体参数</el-button>
        </router-link>
      </div>
      <!-- 服务支持 锚点-->
      <div id="fwzc">
        <div>
          <img src="../assets/挑选车型.png" alt="" />
          挑选车型
        </div>
        <img src="../assets/下一步.png" alt="" />
        <div>
          <img src="../assets/咨询客服.png" alt="" />
          咨询客服
        </div>
        <img src="../assets/下一步.png" alt="" />
        <div>
          <img src="../assets/生成订单.png" alt="" />
          生成订单
        </div>
        <img src="../assets/下一步.png" alt="" />
        <div>
          <img src="../assets/到店试驾.png" alt="" />
          到店试驾
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0, // 当前激活的导航索引
      gprice: "xx",
      value: [],
      options: [
        {
          value: "haibao",
          label: "海豹",
          children: [
            {
              value: "1",
              label: "550km标准续航后驱版精英型",
            },
            {
              value: "2",
              label: "550km标准续航后驱版尊贵型",
            },
            {
              value: "3",
              label: "700km长续航后驱版",
            },
            {
              value: "4",
              label: "650km四驱性能版",
            },
          ],
        },
        {
          value: "handmi",
          label: "汉DM-i",
          children: [
            {
              value: "5",
              label: "121KM尊贵型",
            },
            {
              value: "6",
              label: "121KM尊容型",
            },
            {
              value: "7",
              label: "121KM尊享型",
            },
            {
              value: "8",
              label: "242KM旗舰型",
            },
          ],
        },
        {
          value: "hanev",
          label: "汉EV 创世版",
          children: [
            {
              value: "9",
              label: "715KM尊容型",
            },
            {
              value: "10",
              label: "715KM旗舰型",
            },
            {
              value: "11",
              label: "610KM四驱尊享型",
            },
          ],
        },
        {
          value: "tangev",
          label: "2022款唐EV",
          children: [
            {
              value: "12",
              label: "600KM尊享型",
            },
            {
              value: "13",
              label: "730KM尊享型",
            },
            {
              value: "14",
              label: "635KM四驱尊享型",
            },
          ],
        },
      ],
    };
  },
  // 页面加载时
  mounted() {
    //浮动栏的消失与显示
    window.onscroll = function () {
      var t = document.documentElement.scrollTop || document.body.scrollTop;
      if (t >= 1000) {
        document.getElementsByClassName("suoyin")[0].style.display = "block";
      } else {
        document.getElementsByClassName("suoyin")[0].style.display = "none";
      }
    };

    // 监听滚动事件
    window.addEventListener("scroll", this.onScroll);
  },
  destroy() {
    // 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
    window.removeEventListener("scroll", this.onScroll);
  },
  // 函数
  methods: {
    //获取指导价
    handleChange(value) {
      let url = `/car?cid=${value[1]}`;
      this.axios.get(url).then((res) => {
        this.gprice = res.data.data[0].gprice;
      });
    },

    // 锚点的双向绑定
    goAnchor(id) {
      var anchor = document.getElementById(id);
      anchor.scrollIntoView();
    },

    // 滚动监听器
    onScroll() {
      // 获取所有锚点元素
      const navContents = document.querySelectorAll(".content>div");
      // 所有锚点元素的 offsetTop
      const offsetTopArr = [];
      navContents.forEach((item) => {
        offsetTopArr.push(item.offsetTop);
      });
      // 获取当前文档流的 scrollTop
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 定义当前点亮的导航下标
      let navIndex = 0;
      for (let n = 0; n < offsetTopArr.length; n++) {
        // 如果 scrollTop 大于等于第 n 个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
        // 那么此时导航索引就应该是 n 了
        if (scrollTop >= offsetTopArr[n]) {
          navIndex = n;
        }
      }
      // 把下标赋值给 vue 的 data
      this.active = navIndex;
    },
  },
};
</script>

<style lang="scss">
html {
  overflow-x: hidden;
}
* {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
.suoyin {
  background: white;
  text-align: center;
  width: 180px;
  height: 258px;
  position: fixed;
  top: 30vh;
  left: 1.5vw;
  box-shadow: 1px 2px 40px 4px rgb(0, 0, 0, 30%);
  box-sizing: border-box;
  cursor: pointer;
  border-radius: 0.5rem;
  display: none;
  z-index: 999;

  a {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    color: #000;
    text-decoration: none;
  }

  ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    text-align: center;
    color: black;
  }
  ::-moz-placeholder {
    /* Firefox 19+ */
    text-align: center;
    color: black;
  }
  :-ms-input-placeholder {
    /* IE 10+ */
    text-align: center;
    color: black;
  }
  :-moz-placeholder {
    /* Firefox 18- */
    text-align: center;
    color: black;
  }

  .gprice {
    padding: 10px;
    font-size: 1.2em;
  }
  .block ~ a {
    display: block;
    padding: 10px;
    border-bottom: 1px solid #dcdfe6;

    i {
      display: inline-block;
      width: 20px;
      height: 20px;
      // background: red;
      vertical-align: bottom;
      background-size: contain;
      background-repeat: no-repeat;
    }
    .i1 {
      background-image: url("../assets/车辆亮点.png");
    }
    .i2 {
      background-image: url("../assets/车辆内饰.png");
    }
    .i3 {
      background-image: url("../assets/车辆参数.png");
    }
    .i4 {
      background-image: url("../assets/服务流程.png");
    }
    span {
      margin: 0 10px;
    }
    //  悬浮色color:#cfaa75
  }
  & > a:nth-child(6) {
    border: 0;
  }
  & .gotop {
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
    background: #e8e8e8;
    padding: 10px;
    text-align: center;
    border: 1px solid #cfaa75;
    border-radius: 18px;
    color: #cfaa75;
    img {
      width: 80px;
    }
    span {
      color: #cfaa75;
    }
  }
  .block ~ a:hover span {
    color: #00b1a9;
  }
  .block ~ a:hover .i1 {
    background-image: url("../assets/车辆亮点hover.png");
  }
  .block ~ a:hover .i2 {
    background-image: url("../assets/车辆内饰hover.png");
  }
  .block ~ a:hover .i3 {
    background-image: url("../assets/车辆参数hover.png");
  }
  .block ~ a:hover .i4 {
    background-image: url("../assets/服务流程hover.png");
  }

  & .active {
    span {
      color: #00b1a9;
    }
    i {
      vertical-align: bottom;
      background-size: contain;
      background-repeat: no-repeat;
    }
    #i1 {
      background-image: url("../assets/车辆亮点hover.png");
    }
    #i2 {
      background-image: url("../assets/车辆内饰hover.png");
    }
    #i3 {
      background-image: url("../assets/车辆参数hover.png");
    }
    #i4 {
      background-image: url("../assets/服务流程hover.png");
    }
  }
}
// 车辆内饰
#clns {
  margin: 20px;

  .bigger {
    width: 400px;
    overflow: hidden;
    margin: 15px auto;
  }

  img {
    width: 100%;
    transition: 0.5s;
    cursor: pointer;

    &:hover {
      transition-timing-function: linear;
      transform: scale(1.2);
    }
  }
}
// 参数配置
#cspz {
  img {
    width: 100%;
  }
  button {
    font-size: 28px;
    background: #545c64;
  }
}
//服务支持
#fwzc {
  margin: 50px;
  display: flex;
  justify-content: space-evenly;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;

  div {
    img {
      width: 140px;
      height: 125px;
      display: block;
      margin-bottom: 10px;
    }
  }
}
</style>